<template>
	<view class="page">
		<view class="safeVue" :style="{ height: statusBarHeight + 20 + 'rpx' }"></view>
		<view class="topVue" :style="{ height: barHeight + 'rpx', top: statusBarHeight + 'rpx' }">
			<view class="safeVue" :style="{ height: statusBarHeight + 'rpx' }"></view>
			<view class="flex-center align-center padding-row30" :style="{ height: barHeight + 'rpx', top: statusBarHeight + 'rpx' }" @click="$tools.back()">
				<text style="line-height: 1; color: #454545; font-weight: 600; font-size: 32rpx;">家事生活</text>
			</view>
		</view>
		<view :style="{ height: statusBarHeight + barHeight + 'rpx' }"></view>
		
		<view class="label" style="padding: 20rpx 0 0 30rpx; font-weight: 600; color: #333;">家事服务</view>
		<view class="items flex-wrap flex-between">
			<view class="item flex-center align-center padding-row20" v-for="(item, index) in options1" :key="index" @click="navigate('./detail', item)">
				<image :src="item.imgUrl" style="width: 66rpx; height: 66rpx; border-radius: 10rpx;"></image>
				<text style="color: #454545; font-size: 32rpx; font-weight: 600; padding-left: 10rpx;">{{item.homecareName}}</text> 
			</view>
		</view>
		<view class="label" style="padding: 20rpx 0 0 30rpx; font-weight: 600; color: #333;">商业服务</view>
		<view class="items flex-wrap flex-between">
			<view class="item flex-center align-center padding-row20" v-for="(item, index) in options2" :key="index" @click="navigate('./detail', item)">
				<image :src="item.imgUrl" style="width: 66rpx; height: 66rpx; border-radius: 10rpx;"></image>
				<text style="color: #454545; font-size: 32rpx; font-weight: 600; padding-left: 10rpx;">{{item.homecareName}}</text> 
			</view>
		</view>
		<u-tabbar v-model="current" :list="list" active-color="#D37430" @change="tabbarChange"></u-tabbar>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				options1: [],
				options2: []
			}
		},
		
		computed: {
			...mapState({
				list: state=> state.list
			}),
			current: {
				get(){
					return this.$store.state.current
				},
				set(val) {
					this.$store.state.current = val
				}
			}
		},
		
		async onLoad() {
			let that = this;
			wx.getSystemInfo({
				success(res) {
					let deviceWidth = wx.getSystemInfoSync().windowWidth
					that.statusBarHeight = Number(res.statusBarHeight) * ( 750 / deviceWidth ) 
					let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
					let barHeight = menuButtonInfo.height + (menuButtonInfo.top - res.statusBarHeight) * 2
					that.barHeight = Number(barHeight) * ( 750 / deviceWidth )
				},
			});
		},
		
		async onShow() {
			await this.getList()
		},
		
		methods: {
			tabbarChange(e){
				console.log(e)
				this.$store.dispatch("getCurrent", e)
				uni.switchTab({
					url: this.list[e].path
				})
			},
			
			navigate(path, item){
				uni.navigateTo({
					url: path + "?item=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			
			// 获取家事服务列表
			async getList(){
				const reslut = await this.$request("/api/WeChat/officeHomecareList", {
					shopId: 1259
				}, "GET")
				if(reslut.code===200) {
					let options = reslut.data
					console.log(options, "家事列表")
					this.options1 = []
					this.options2 = []
					for(let i=0; i < options.length; i++) {
						if(options[i].type==0) this.options1.push(options[i])
						if(options[i].type==1) this.options2.push(options[i])
					}
				}
			}
		}
	}
</script>


<style lang="less" scoped>
	.items {
		width: 100%;
		padding: 30rpx;
		.item {
			width: 330rpx;
			height: 120rpx;
			background: #fff;
			border: #6387BF 6rpx solid;
			border-radius: 20rpx;
			// box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			margin-bottom: 30rpx;
		}
		.item:nth-child(6n) {
			background: #C0FF3E;
		}
		.item:nth-child(6n+1) {
			background: #00EEEE;
		}
		.item:nth-child(6n+2) {
			background: #EE7AE9;
		}
		.item:nth-child(6n+3) {
			background: #6fa8dc;
		}
		.item:nth-child(6n+4) {
			background: #f5999d;
		}
		.item:nth-child(6n+5) {
			background: #438ccb;
		}
	}
	
	.safeVue {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 109;
		background: #fff;
	}
	.topVue {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		z-index: 99;
	}
	
</style>
